<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStroge</title>
</head>
<body>
    <div>
        即使关闭浏览器，数据依然存在
    </div>
    <h3>localStroge</h3>
    <button id="buttonset">点击把数据保存到本地</button>
    <button id="buttonget">读取数据</button>
    <button id="buttonDelete">点我删除一个数据</button>
    <button id="buttonClear">点我清空数据</button>
    <script>
        const button  = document.querySelector('#buttonset')
        const buttonget  = document.querySelector('#buttonget')
        const buttonDelete  = document.querySelector('#buttonDelete')
        const buttonClear  = document.querySelector('#buttonClear')
        let obj = {
            name:'jake',
            age:12
        }
        button.onclick = () => {
            // key 和 value必须都是字符串 如果第二个不是字符串，会自动调用toString()
            localStorage.setItem('obj',JSON.stringify(obj))  // {"name":"jake","age":12}
            localStorage.setItem('obj1', obj) // [object Object]
        }

        buttonget.onclick = () => {
            // 如果没有该对象 返回值是null
            let result = localStorage.getItem('obj')
            console.log(result);
            console.log(JSON.parse(result)); // JSON.parse(null) == null
        }

        buttonDelete.onclick = () => {
            localStorage.removeItem('obj')
        }

        buttonClear.onclick = ()=>{
            localStorage.clear()
        }
    </script>
</body>
</html>